<template>
	<view class="page">
		<topVue :title="$t('提币')" :right="$t('提币明细')" @rightClick="$tools.route('./withdrawRecord')"></topVue>

		<view class="inpVue flex-between align-center margin50 padding30" @click="show=true">
			<text style="font-size: 32rpx; color: #04094C;">{{ $t('币种') }}</text>
			<view class="flex align-center">
				<text style="font-weight: 700; font-size: 36rpx; color: #04094C;">{{ currencyName }}</text>
				<image src="/static/more.png" style="width: 50rpx; height: 50rpx; margin-left: 20rpx;"></image>
			</view>
		</view>

		<view class="inpVue margin20 padding30">
			<text style="font-size: 32rpx; color: #04094C;">{{ $t('提币数量') }}</text>
			<u-gap height="30"></u-gap>
			<input type="text" :placeholder="$t('请输入提币数量')" v-model="quantity" placeholder-style="color: #CCC; font-size: 30rpx;"/>
		</view>

		<view class="inpVue flex-between align-center margin20 padding30">
			<text style="font-size: 32rpx; color: #04094C;">{{ $t('可用数量') }}</text>
			<text style="font-weight: 700; font-size: 36rpx; color: #04094C;">{{ balance }} {{ currencyName }}</text>
		</view>
		<view class="inpVue flex-between align-center margin20 padding30">
			<text style="font-size: 32rpx; color: #04094C;">{{ $t('手续费') }}</text>
			<text style="font-weight: 700; font-size: 36rpx; color: #04094C;">{{ cost }} {{ currencyName }}</text>
		</view>
		<!-- <view class="inpVue flex-between align-center margin20 padding30">
			<text style="font-size: 32rpx; color: #04094C;">到账数量</text>
			<text style="font-weight: 700; font-size: 36rpx; color: #04094C;">0 USDT</text>
		</view> -->

		<view class="btn margin80" @click="withdrawFun">{{ $t('提交') }}</view>

		<u-action-sheet :list="list" :cancel-text="$t('取消')" v-model="show" @click="sheetClick"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				quantity: "",
				address: "",
				list: [{text: "USDT", value: 1}, {text: "JNP", value: 2}],
				show: false,
				balance: 0,
				currencyId: null,
				currencyName: "",
				cost: 0,
				feeRate: 0
			}
		},
		onLoad() {
			this.currencyId = this.list[0].value
			this.currencyName = this.list[0].text
			this.getFeeRate()
			this.getBalance()
		},
		watch: {
			quantity(){
				this.cost = this.quantity * this.feeRate;
			}
		},
		methods: {
      async getFeeRate() {
        this.$request("/front/user/getExtractConfig").then(res=>{
          this.feeRate = res.data.feeRate
        })
      },
			async withdrawFun(){
				if(!this.quantity) return this.$u.toast("请输入数量")
				if(this.quantity>this.balance) return this.$u.toast("余额不足")
				const res = await this.$request("/front/user/extract", {
					currency: this.currencyId,
					amount: this.quantity
				})
				if(res.code===0) {
					this.$u.toast(this.$t("成功"))
					this.quantity = ""
					this.cost = 0
				}else{
					this.$u.toast(res.msg)
				}
			},

			getBalance(){
				this.$request("/front/user/userWallet", {
					currency: this.currencyId
				}).then(res=>{
					this.balance = res.data.balance
				})
			},

			sheetClick(e){
				console.log(e)
				this.currencyId = this.list[e].value
				this.currencyName = this.list[e].text
				this.getBalance()
			}
		}
	}
</script>

<style lang="less" scoped>
	.inpVue {
		width: 690rpx;
		background: rgba(237, 244, 255, 0.8);
		border-radius: 20rpx;
		input {
			width: 100%;
			height: 70rpx;
			font-size: 30rpx;
			color: #333;
		}
	}
	.btn {
		width: 690rpx;
		height: 80rpx;
		background: #4D9FED;
		border-radius: 40rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		font-size: 30rpx;
	}
</style>
